<template lang="pug">
  .clearfix
    Modal(
      width="480"
      v-model="isShowErweimaModal"
      title="入职二维码"
      :closable="false"
      :mask-closable="false"
    )
      Form(ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120")
        FormItem(label="客户名称：" prop="companyName"  :label-width="100")
          Input.input-has-border(v-model="formValidate.companyName" disabled)
        FormItem(label="入职模板：" prop="templateId"  :label-width="100")
          Select.input-has-border(v-model="formValidate.templateId" clearable filterable @on-change="(event) => templateIdChange(event)")
            Option(
              v-for="(c_item, index) in templateIdOps"
              :value="c_item.value"
              :key="index"
            ) {{ c_item.label }}

      .text-center(v-if="previewImgUrl")
        img(:src="previewImgUrl")
        Button(type="text" :to="previewImgUrl" target="_blank") 下载

      .clearfix(slot="footer")
        Button(type="text" @click="cancel") 关闭
        //- Button(type="primary" @click="handleSubmit" :loading="!isCanSubmit") 确定
</template>

<script>
import config from '@/config'
import { CustomerQuickEntryQRCodeApi } from '@/api/CustomerQuickEntryQRCode.api.js'
// const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro

export default {
  name: '',

  props: {
  },

  data () {
    return {
      isShowErweimaModal: false,
      isCanSubmit: true,
      record: null,
      formValidate: {
        companyName: '',
        templateId: '',
      },
      ruleValidate: {
        companyName: [
          { required: true, message: '客户名称不能为空', trigger: 'blur' }
        ],
        templateId: [
          { required: true, message: '入职模板不能为空', trigger: 'blur' }
        ]
      },
      templateIdOps: [],
      previewImgUrl: null
    }
  },

  watch: {
  },

  mounted () {
  },

  methods: {
    show (row) {
      this.isShowErweimaModal = true
      this.record = row
      this.formValidate.companyName = row.name
      this.previewImgUrl = null
    },

    cancel () {
      this.isShowErweimaModal = false
      this.$refs.formValidate.resetFields()
    },

    // 根据客户ID获取模板列表
    getTemplateList (id) {
      CustomerQuickEntryQRCodeApi.GetTemplateList(id).then(resp => {
        console.log('%c 根据客户ID获取模板列表: ', 'color:red', resp)
        if (resp.data.success) {
          this.templateIdOps = resp.data.data.map(item => {return {label: item.name, value: item.id}})
        } else {
          this.templateIdOps = []
        }
      })
    },

    // 生成快速入职二维码
    generate () {
      var params = {
        CompanyId: this.record.id,
        TemplateId: this.formValidate.templateId
      }
      CustomerQuickEntryQRCodeApi.Generate(params).then(resp => {
        console.log('%c 生成快速入职二维码: ', 'color:red', resp)
        if (resp.data.success) {
          this.previewImgUrl = (baseUrl + '/' + resp.data.data).replace('/api', '')
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },

    // 模板改变
    templateIdChange (event) {
      console.log('%c 模板改变: ', 'color:red', event, ', record: ', this.record)
      this.generate()
    },
  }
}
</script>

<style lang="less" scope>
.action-icon{
  width: 28px;
  height: 25px;
  line-height: 23px;
  color: #c5c8ce;
  background-color: #f7f7f7;
  border: solid 1px #dcdee2;
  text-align: center;
  font-size: 14px;
  border-radius: 3px;
  transition: all .3s;
  cursor: pointer;
  padding: 0;
  &:hover{
    color: #fff;
    background-color: #2d8cf0;
    border-color: #2d8cf0;
  }
}
</style>
